.chat_area_mould {
    position: relative;
    width: 100%;
    flex: 1;
    border-top: 1px solid #e7e7e7;

    .chat_area_ul {
        position: relative;
        width: calc(100% - 60px);
        margin: auto;
        box-sizing: border-box;
        padding-top: 5px;

        li {
            margin-bottom: 15px;
            display: flex;
            justify-content: center;
            gap: 10px;

            .avatar {
                width: 36px;
                height: 36px;
                border-radius: 4px;
                overflow: hidden;
                user-select: none;
                -webkit-user-select: none;
                cursor: pointer;

                img {
                    width: 100%;
                }
            }

            .recall {
                width: 100%;
                text-align: center;
                color: #999;
                font-size: 12px;
                user-select: none;
                -webkit-user-select: none;
            }

            .date {
                background-color: #dadada;
                box-sizing: border-box;
                padding: 3px 5px;
                border-radius: 4px;
                color: #fff;
                font-size: 12px;
                user-select: none;
                -webkit-user-select: none;
            }

            .big_img img {
                min-width: 56px;
                max-width: 174px;
                min-height: 56px;
                max-height: 174px;
                border-radius: 4px;
                border: 1px solid #e5e5e5;
                user-select: none;
                -webkit-user-select: none;
                cursor: pointer;
            }

            .content {
                position: relative;
                max-width: 59%;
                border-radius: 6px;
                color: #000;
                box-sizing: border-box;
                padding: 3px 15px;
                line-height: 28px;
                white-space: pre-wrap;
                filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));

                &:hover {
                    filter: brightness(0.9);
                }

                img {
                    /* width: 28px; */
                    max-width: 146px;
                    max-height: 98px;
                    vertical-align: bottom;
                }

                &::before {
                    content: "";
                    position: absolute;
                    z-index: 1;
                    top: 12px;
                    width: 0;
                    height: 0;
                    border: 5px solid transparent;
                }
            }

            &.left {
                justify-content: unset;

                .content {
                    background-color: #fff;

                    &::before {
                        left: -10px;
                        border-right-color: #fff;
                    }
                }
            }

            &.rig {
                flex-direction: row-reverse;
                justify-content: unset;

                .content {
                    background-color: #95ec69;

                    &::before {
                        right: -10px;
                        border-left-color: #95ec69;
                    }
                }
            }
        }
    }
}
